<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .demop{
      background-color: #761c19;
      font-size: 30px;
      color: white;
    }
  </style>
</head>
<body>

<script>
  window.onload=function() {
//  1.元素.style的方式
    document.getElementsByTagName("p")[0].style.color="orangered";
    document.getElementsByTagName("p")[0].style.fontWeight="bold";
    document.getElementsByTagName("p")[0].style.fontSize="60px";
//  2.修改html标签的style属性的方式进行样式的修改
    document.getElementsByTagName("p")[0].setAttribute("style","background-color:green");
//  3.给指定元素添加class类的方式
    document.getElementsByTagName("p")[0].setAttribute("class","demop");

// 练习:event.target练习
var allli = document.getElementsByTagName("li");
    for(var i =0;i<allli.length;i++){
      allli[i].addEventListener("click",function (event) {
        event.target.setAttribute("class","demop");
      },false);
    }
  }
    </script>
<p>修改我</p>

<ul>
  <li>aaaaa11</li>
  <li>aaaaa12</li>
  <li>aaaaa13</li>
  <li>aaaaa14</li>
  <li>aaaaa15</li>
  <li>aaaaa16</li>
  <li>aaaaa17</li>
</ul>
</body>

</html>
